<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>demo2</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 点击菜单
            $(".show-page").bind("click", function () {
                $(".main-body").html("");
                $(".result-div").html("");
                var url = $(this).attr("url");

                $.ajax({
                    async: false,
                    cache: false,
                    type: 'POST',
                    url: url,
                    dataType: "html",
                    error: function () {
                        alert('请求失败');
                    },
                    success: function (data) {
                        $(".result-div").html(data);
                    }
                });
            });

            // 点击我要请假，开启流程
            $(".show-instance").bind("click", function () {
                $(".main-body").html("");
                $(".result-div").html("");
                var url = $(this).attr("url");

                $.ajax({
                    async: false,
                    cache: false,
                    type: 'POST',
                    url: url,
                    dataType: "html",
                    error: function () {
                        alert('请求失败');
                    },
                    success: function (data) {
                        $("input[name='instanceId']").val(data);
                    }
                });
            });

            // 绑定查看流程图
            $(".show-img").bind("click", function () {
                var instanceId = $("input[name='instanceId']").val();
                if (instanceId == "") {
                    alert("暂无流程！");
                    return;
                }
                var imgHtml = '<embed src="/ac/show_img?instanceId=' + instanceId + '" style="display:block;width:1000px;height:500px" />';
                $(".result-div").html(imgHtml);
            });

            // 查看任务
            $(".show-task").bind("click", function () {
                $.ajax({
                    async: false,
                    cache: false,
                    type: 'POST',
                    url: "/demo/toShowTask",
                    data: {"aaabbbccc": "aa"},
                    dataType: "html",
                    error: function () {
                        alert('请求失败');
                    },
                    success: function (data) {
                        $(".result-div").html(data);
                    }
                });
            });

        });

    </script>
</head>
<body>
<!-- 菜单栏 -->
<div class="main-menu">
    <button class="show-img">查看流程图</button>
</div>
<br/>
流程实例ID:<input type="text" name="instanceId"/>
<br/>
<!-- 操作栏 -->
<div class="main-body">

</div>
<br/>
<!-- 结果栏 -->
<div class="result-div">
    <embed src="/ac/show_img?instanceId=1372380866103099394"
           style="display:block;width:1000px;height:500px"/>
    <br>
</div>


</body>
</html>